<template>
  <div>
    <div class="tabBar" ref='tabs'>
      <div class="tabItem" @click='handleChange(item.id)' v-for='item in tabList' :key='item.id'>
        <span>{{item.title}}</span>
        <em class="active" v-if='currentId === item.id'></em>
      </div>
    </div>
    <div>
      <!-- 发现 -->
      <Discover v-if='currentId === 1'></Discover>
      <!-- 关注 -->
      <Follow v-if='currentId === 2'></Follow>
      <!-- 流行 -->
      <Popular v-if='currentId === 3'></Popular>
    </div>
  </div>
</template>
<script>
import Discover from '@/pages/Home/Discover'
import Follow from '@/pages/Home/Follow'
import Popular from '@/pages/Home/Popular'
export default {
  components: {
    Discover,
    Follow,
    Popular
  },
  data () {
    return {
      tabList: [
        {
          title: '发现',
          id: 1
        },
        {
          title: '关注',
          id: 2
        },
        {
          title: '流行',
          id: 3
        }
      ],
      currentId: 1 // 当前tab栏的id
    }
  },
  mounted () {
    // 监听滚动
    window.addEventListener('scroll', this.scrollToTop)
  },
  methods: {
    handleChange (value) {
      this.currentId = value
    },
    scrollToTop () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (this.$refs.tabs) {
        this.$refs.tabs.style.position = (scrollTop > 300 ? 'fixed' : '')
        this.$refs.tabs.style.top = (scrollTop > 300 ? 0 + 'px' : '')
      }
    }
  }
}
</script>
<style lang='less'>
.tabBar{
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: .32rem;
  font-weight: 700;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  position: relative;
  text-align: center;
  .tabItem{
    position: relative;
    width: 33.33%;
    .active{
      position: absolute;
      left: 50%;
      bottom: .2rem;
      display: block;
      width: .5rem;
      height: .04rem;
      margin-left: -.25rem;
      border-radius: .02rem;
      background: #ff5777;
    }
  }
}
</style>
